<template>
    <div class="popover_user">
        <div class="popover_user_info">
            <img :src="user.avatar" alt="" class="popover_user_avatar">
            <div class="popover_user_other">
                <div class="popover_user_name">{{ user.remark || user.nickname }}</div>
                <div class="popover_user_view">{{ $t('msg.昵称') }}：{{ user.nickname }}</div>
                <div class="popover_user_view">ID：{{ user.id }}</div>
            </div>
            <el-popover placement="right" trigger="hover" :disabled="!isFriend">
                <div class="popover_user_more">
                    <div class="popover_more_item" @click="dialogShow('setRemark', $t('msg.设置备注'))">{{ $t('msg.设置备注') }}
                    </div>
                    <div class="popover_more_item" @click="dialogShow('setAuth', $t('msg.朋友权限'))">{{ $t('msg.朋友权限') }}
                    </div>
                    <div class="popover_more_item popover_more_active" @click="deleteContact" v-if="!is_kefu">{{
                        $t('msg.删除联系人') }}</div>
                </div>
                <div slot="reference" class="popover_more_btn">
                    <img src="@/assets/image/more_dot.png" alt="">
                </div>
            </el-popover>
        </div>
        <div class="popover_item" @click="dialogShow('setRemark', $t('msg.设置备注'))">
            <div class="popover_item_key">{{ $t('msg.备注名') }}</div>
            <div class="popover_item_value">{{ user.remark }}</div>
        </div>
        <div class="popover_item">
            <div class="popover_item_key">{{ $t('msg.来源') }}</div>
            <div class="popover_item_value" v-if="user.source_type == 1">{{ $t('msg.来自扫码') }}</div>
            <div class="popover_item_value" v-if="user.source_type == 2">{{ $t('msg.来自搜索') }}</div>
            <div class="popover_item_value" v-if="user.source_type == 3">{{ $t('msg.来自群聊') }}</div>
        </div>
        <div class="popover_item">
            <div class="popover_item_key">{{ $t('msg.添加时间') }}</div>
            <div class="popover_item_value">{{ user.createtime }}</div>
        </div>
        <div class="popover_send" @click="send_msg">
            <img src="@/assets/image/msg.png" alt="">
            <span>{{ $t('msg.发消息') }}</span>
        </div>

        <el-dialog :title="dialogTitle" :visible="dialogBoolen" top="100px" :modal="true" :center="true" width="430px"
            :show-close="false" append-to-body>
            <setRemark v-if="dialogName == 'setRemark'" :im_id="im_id" :user_id="user_id" @close="dialogBoolen = false"
                @ok="ok_click" />
            <setAuth v-else-if="dialogName == 'setAuth'" :im_id="im_id" :user_id="user_id" @close="dialogBoolen = false"
                @ok="ok_click" />
        </el-dialog>
    </div>
</template>

<!-- allContacts -->
<script>
import { mapState } from "vuex";
import setRemark from "@/components/contacts/setRemark.vue"
import setAuth from "@/components/contacts/setAuth.vue"
export default {
    components: {
        setRemark,
        setAuth,
    },
    props: {
        type: String,
        contact: {
            type: Object,
            default: () => { }
        },
        im_id: {
            type: [String, Number],
            default: ""
        }
    },
    computed: {
        ...mapState({
            allContacts: state => state.allContacts
        })
    },
    data() {
        return {
            dialogTitle: "",
            dialogBoolen: false,
            dialogName: "",

            user: {},
            user_id: null,
            isFriend: false,
            is_kefu: false
        }
    },
    watch: {
        im_id: {
            handler(v, n) {
                this.getUserInfo();
            },
            immediate: false
        }
    },
    created() {
        this.getUserInfo();
    },
    methods: {
        async getUserInfo() {
            if(!this.im_id)return;

            let { user } = await this.$api.chatApi.searchUser({
                im_user_id: this.im_id
            });
            this.user = user;
            this.user_id = user.id;

            this.isFriend = user.is_friend ? true : false;
            this.is_kefu = user.is_kefu ? true : false;
        },
        // 删除好友
        async delFriend() {
            await this.$api.chatApi.delFriend({
                user_id: this.user_id
            });
            this.$message({
                message: this.$t('msg.删除成功'),
                type: 'success'
            });
            this.$emit('ok');
        },

        deleteContact() {
            this.$confirm(this.$t('msg.确定删除联系人吗'), this.$t('msg.提示'), {
                confirmButtonText: this.$t('msg.确定'),
                cancelButtonText: this.$t('msg.取消'),
                type: 'warning'
            }).then(() => {
                this.delFriend();
            }).catch(() => { });
        },

        ok_click() {
            this.getUserInfo();
            this.dialogBoolen = false;
            this.$emit('ok');
        },
        send_msg() {
            let contact = this.allContacts.find(item => item.user_id == this.im_id);
            if (this.type == 'index') {
                this.$emit("close");
            } else {
                this.$store.commit('changeChatUser', contact);
                setTimeout(() => {
                    this.$router.replace({
                        name: 'message'
                    })
                }, 100)
            }
        },
        dialogShow(value, title) {
            if (!this.isFriend) return;
            this.dialogName = value;
            this.dialogTitle = title;
            this.dialogBoolen = true;
            // this.$emit("close");
        }
    }
}
</script>


<style lang="scss">
.popover_user {
    width: 260px;
    height: 360px;
    padding: 12px;
    box-sizing: border-box;

    &_info {
        display: flex;
        justify-content: space-between;
        padding-bottom: 16px;
        border-bottom: 1px solid #EDEDED;
    }

    &_avatar {
        width: 52px;
        height: 52px;
        border-radius: 4px 4px 4px 4px;
    }

    &_other {
        padding-left: 12px;
        box-sizing: border-box;
    }

    &_name {
        height: 25px;
        line-height: 25px;
        font-size: 18px;
        color: #333333;
    }

    &_view {
        height: 17px;
        line-height: 17px;
        font-size: 12px;
        color: #7F7F7F;
    }



    .popover_item {
        height: 52px;
        border-bottom: 1px solid #EDEDED;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;

        &_key {
            font-size: 14px;
            color: #7F7F7F;
        }

        &_value {
            font-size: 14px;
            color: #333333;
        }
    }

    .popover_send {
        padding-top: 80px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
            width: 19px;
            height: 19px;
        }

        span {
            font-size: 14px;
            color: #2273FF;
            margin-left: 4px;
        }
    }
}

.popover_user_more {
    .popover_more_item {
        height: 32px;
        line-height: 32px;
        text-align: center;
        font-size: 14px;
        color: #333333;
        cursor: default;

        &.popover_more_active {
            color: #FF4C4C;
        }

        &:hover {
            background: #EDEDED;
        }
    }
}

.popover_more_btn {
    img {
        width: 24px;
        height: 24px;
        border-radius: 2px 2px 2px 2px;
    }
}
</style>